<template>
	<view class="content">
		<view class="item-box">
			<view class="list-item" v-for="(item,i) in data" :key="i">
				<view class="title-box"  @click="gotoJiaruView(item.pipei_id)">
					<view class="title">
						{{item.chang_guan + '  ' + item.chang_di}}
					</view>
					<view class="renshu">
						组队人数:{{item.duiyou_shuliang}}
					</view>
				</view>
				<view class="name-box">
					<view class="box"  @click="gotoJiaruView(item.pipei_id)">
						<view class="name">
							队伍名称:
						</view>
						<view class="namespace">
							{{item.name}}
						</view>
					</view>
					<view class="btn" @click="gotoMessage(item.pipei_id)">
						进入聊天
					</view>
				</view>
				<view class="center-box"  @click="gotoJiaruView(item.pipei_id)">
					<view class="ui-imgs">
						<view class="img-box" v-for="(item2,i2) in item.duiyou_shuliang" :key="i2">
							<image class="img" v-if="item.duiyuan_list[i2] && item.duiyuan_list[i2].tou_xiang!= ''"
								:src="base64Img(item.duiyuan_list[i2].tou_xiang)">
								1
							</image>
							<image class="img" v-if="item.duiyuan_list[i2] && item.duiyuan_list[i2].tou_xiang== ''"
								src="../../../static/minilogo.png">
								2
							</image>
							
							
							<image class="img" v-if="!item.duiyuan_list[i2]" src="@/static/nojiaruuser.png">
							</image>
						</view>
					</view>
					<view class="right-day">
						<view class="start-time">
							{{dayTimeReact(item.start_time)}}
						</view>
						<view class="end-time">
							{{dayTimeReact(item.end_time)}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	import {
		onLoad
	} from '@dcloudio/uni-app'

	import {
		getUserHistoryPipayList
	} from '@/api/mine_api.js'

	import {
		base64Img
	} from '@/tools/tools.js'


	const userOpenId = ref('')
	const data = ref([])

	const _getUserHistoryPipayList = (id) => {
		getUserHistoryPipayList(id).then((res2) => {
			console.log(res2);
			data.value = res2.result
			if (data.value.length == 0) {
				uni.showModal({
					title: '提示',
					content: '您没有已经组队的订单',
					success() {
						uni.navigateBack(1)
					}
				})

			}
		})
	}

	const dayTimeReact = (tiem) => {
		const [datePart, timePart] = tiem.split(' '); // 按空格分割日期和时间部分

		// 处理日期部分
		const [year, month, day] = datePart.split('-').map(Number);

		// 处理时间部分
		const [hours, minutes] = timePart.split(':').map(Number);

		// 格式化为你想要的格式：11月8日 12:00
		const formattedDate = `${month}月${day}日 ${hours}:${minutes < 10 ? '0' + minutes : minutes}`;

		return formattedDate;
	}

	const gotoJiaruView = (id) => {
		uni.navigateTo({
			url: `/pages/mine/zuiduiviews/exit_team_view?id=${id}`
		})
	}
	
	const gotoMessage = (id) => {
		uni.navigateTo({
			url:`/pages/message_mode/message_content_view?id=${id}&telid=false&check=${0}`
		})
	}

	onLoad((res) => {
		uni.getStorage({
			key: 'openid',
			success(res2) {
				userOpenId.value = res2.data.openid
				_getUserHistoryPipayList(res2.data.openid)
			}
		})
	})
</script>

<style scoped lang="scss">
	.content {
		padding: 20rpx;
		background: linear-gradient(to bottom, rgba(135, 213, 255, 1) 0%, rgba(211, 211, 211, 0.58) 42%, rgba(211, 211, 211, 0) 100%);
		min-height: 100vh;

		.item-box {
			.list-item {
				margin-top: 20rpx;
				padding: 20rpx;
				background-color: white;
				border-radius: 20rpx;

				.title-box {
					font-size: 26rpx;
					font-weight: 400;
					display: flex;
					justify-content: space-between;


				}

				.name-box {
					display: flex;
					justify-content: space-between;
					margin-top: 10rpx;
					.name {
						margin-right: 20rpx;
					}
					
					.box {
						display: flex;
					}
					.btn {
						padding: 14rpx;
						background-color: lightskyblue;
						border-radius: 10rpx;
						color: white;
					}
				}

				.center-box {
					margin-top: 20rpx;
					display: flex;
					justify-content: space-between;
					width: 100%;

					.ui-imgs {
						margin-top: 20rpx;
						display: flex;
						justify-content: space-between;

						.renshu {
							margin-right: 20rpx;
						}

						.img-box {
							.img {
								margin-right: 20rpx;
								width: 80rpx;
								height: 80rpx;
								border-radius: 20rpx;
							}
						}
					}

					.right-day {
						padding-top: 20rpx;
					}
				}
			}
		}
	}
</style>